<template>
  <div class="admin-user-tree">
    <x-border title="批量解冻、冻结会员" desc="根据会员关键关系批量解冻、冻结会员" icon="icon-5333-caig1 " type="light">
      <div slot="headerRight" class="headerRight">

      </div>
      <div class="admin-user-tree_container">
        <div class="search-box">
          <el-input placeholder="请输入会员用户名或手机号" v-model="keyword" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
        <el-alert title="批量解冻、冻结会员" type="success" :closable="false" description="批量解冻、冻结会员，在上面搜索框中输入您要查询会员的用户名或手机号" show-icon>
        </el-alert>
        <div class="content" v-if="viewModel">
          <el-tree ref="tree" :data="viewModel.trees" :load="loadNodeList" highlight-current show-checkbox node-key="value" default-expand-all :props="defaultProps">
          </el-tree>
          <x-line icon="3"></x-line>
          <div class="acction-row">
            <el-row>
              <el-button type="danger" @click="save(1)">批量解冻选中的会员</el-button>
              <el-button type="info" @click="save(2)">批量冻结选中的会员</el-button>
            </el-row>
          </div>
        </div>
        <div v-else v-loading="loading"></div>
      </div>
    </x-border>
  </div>
</template>

<script>

  export default {
    data () {
      return {
        async: false,
        loading: false,
        viewModel: null,
        keyword: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    props: {
      widget: {}
    },
    mounted () {

    },
    methods: {
      async save (status) {
        this.$confirm('是否要解冻选中的会员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          var para = {
            ids: this.$refs.tree.getCheckedKeys(),
            status: status
          }
          var res = await this.$ala.widgetPost('UserRelationFreeze', para)
          if (res) {
            this.$ala.toast('操作成功')
            this.search()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      async search () {
        this.loading = true
        this.async = false
        this.viewModel = null
        var para = {
          keyword: this.keyword
        }
        var res = await this.$ala.widget('UserRelationFreeze', para)
        if (res) {
          this.viewModel = res
        } 
        this.async = true
        this.loading = false
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  [v-cloak] {
    display: none !important;
  }

  .admin-user-tree {
    display: flex;
    .acction-row {
      margin: 20px;
      margin-bottom: 100px;
      margin-left: 100px;
    }
    .search-box {
      width: 40%;
      margin-bottom: 20px;
      margin-left: 30%;
      flex: 1;
      align-items: center;
      display: flex;
      justify-content: center;
    }
    .admin-user-tree_container {
      padding: 0px 20px;
      padding-bottom: 20px;
    }
    .el-loading-mask {
      height: 600px;
    }
  }
</style>


